<template>
    <div class="FavouriteTreeMenu">
        <nav-bar
        :title="'收藏'"
        :menuShow="true"
        :isFavourite="true"
        :isSearch="false"
        @sonAddClick="handleSonAddClick"
        @sonEditClick="handleSonEditClick"
        @sonDeleteClick="handleSonDeleteClick"
        ></nav-bar>

        <!-- 面包屑 -->
        <breadcrumb :breadcrumb="breadcrumb" :isKnowledgeTree="false" isCollection></breadcrumb>

        <!-- 侧边导航页面 -->
        <div class="sidebar_content">
            <!-- 侧边导航 -->
            <sidebar :sidebarList="sidebarList" @activeIndex="activeIndex" :isEdit="isEdit" :isDelete="isDelete"></sidebar>
            <!-- 侧边栏内容部分 -->
            <content-tagList
            :contentListData="listData[sidebarActiveIndex]" :topTitle="sidebarList.length > 0 ? sidebarList[sidebarActiveIndex].label : ''"
            :currentTreeId="currentTreeId"
            :isEdit="isEdit" :isDelete="isDelete"
            ></content-tagList>
        </div>

        <!-- 添加选择器 -->
        <van-popup v-model="showPicker" position="bottom">
            <van-picker
            title="选择文件夹"
            confirm-button-text="添加到"
            show-toolbar
            :columns="columnsList"
            @confirm="onConfirm"
            @cancel="showPicker = false"
            />
        </van-popup>

        <!-- 添加dialog -->
        <van-dialog
        class="editDialog"
        v-model="editDialogVisible"
        title="添加文件夹"
        show-cancel-button
        closeOnClickOverlay
        @confirm="handleConfirmClick"
        >
            <van-field v-model="editDialogValue" placeholder="添加文件夹" />
        </van-dialog>

    </div>
</template>

<script>
import NavBar from 'components/public/NavBar.vue'
import Breadcrumb from 'components/public/Breadcrumb.vue'
import Sidebar from 'components/public/Sidebar.vue'
import ContentTagList from 'components/public/ContentTagList.vue'
export default {
    name: 'FavouriteTreeMenu',
    components: {
        NavBar,
        Breadcrumb,
        Sidebar,
        ContentTagList
    },
    data(){
        return {
            // 左侧侧边栏当前选中index
            sidebarActiveIndex: 0,
            // 左侧侧边栏数据
            sidebarList: [],
            // 右侧二级树结构数据
            listData: [],

            // 当前选中的侧边栏的treeId
            currentTreeId: {},

            // 是否显示编辑图标
            isEdit: false,
            // 是否显示删除图标
            isDelete: false,

            // columnsList: [],
            showPicker: false,
            editDialogVisible: false,
            editDialogValue: '',
            chooseList: '',
            ParentTreeId: 0,

            // 面包屑
            breadcrumb: ['收藏']
        }
    },
    created(){
        this.getFavouriteTreeList()
    },
    methods: {
        // 子组件传过来的index
        activeIndex(index, item){
            this.sidebarActiveIndex = index
            // console.log(item)
            this.currentTreeId = item
            // console.log(this.currentTreeId)
        },
        // 求情树结构数据
        getFavouriteTreeList(){
            this.$request({
                method: 'get',
                url: '/api/FavouriteTree/GetFavouriteTreeByTreeId',
                params: {
                    Token: sessionStorage.getItem("mobileToken"),
                    treeId: 0,
                    Name: '',
                    FileCategory: '',
                    pageSize: '',
                    pageIndex: ''
                }
            }).then(({data}) => {
                // console.log(data)
                if(data.code == 200){
                    this.sidebarList = data.treeDataList
                    this.currentTreeId = this.sidebarList[0]

                    let list = data.treeDataList.map(item => item.children)
                    this.listData = list

                }else{
                    this.$notify('加载数据失败，请重试。')
                }
            })
        },
        // 菜单添加操作
        handleSonAddClick(bol){
            this.showPicker = bol
        },
        // 菜单编辑操作
        handleSonEditClick(bol){
            this.isDelete = false
            this.isEdit = bol
        },
        // 菜单删除操作
        handleSonDeleteClick(bol){
            this.isEdit = false
            this.isDelete = bol
        },

        // 菜单添加确认事件
        onConfirm(val, index){
            // console.log(val)
            // console.log(index)
            // console.log(this.columnsList[0].parentTreeId[index[0]])
            this.chooseList = val
            this.showPicker = false
            this.editDialogVisible = true
            this.ParentTreeId = this.columnsList[0].parentTreeId[index[0]]
        },
        // 添加文件夹确认事件
        handleConfirmClick(){
            // console.log(this.editDialogValue)
            this.$request({
                method: 'post',
                url: "/api/FavouriteTree/Edit?Token=" + sessionStorage.getItem("mobileToken"),
                data: {
                    NodeName: this.editDialogValue,
                    ParentTreeId: this.ParentTreeId
                }
            }).then(({data}) => {
                // console.log(data)
                if(data.code == 200){
                    this.getFavouriteTreeList()
                    this.$notify({type: 'success', message: data.msg})
                }else{
                    this.$notify('加载数据失败，请重试。')
                }
            })
        }
    },
    computed: {
        columnsList(){
            let arr = this.sidebarList
            let arr2 = [{values: ['顶级目录'], parentTreeId: [0]}]
            
            arr.forEach(item => {
                arr2[0].values.push(item.label)
                if(item.children.length > 0){
                    arr2[0].parentTreeId.push(item.children[0].parentTreeId)
                }
            })
            
            // console.log(arr)
            // console.log(arr2)
            return arr2
        }
    },
    watch: {
        editDialogVisible(newVal){
            if(!newVal){
                this.editDialogValue = ''
            }
        }
    }
}
</script>

<style lang="less" scoped>
.FavouriteTreeMenu{
    .sidebar_content{
        margin: 0 -15px;
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
    }
}
</style>